<template>
  <div class="detail">
    <div class="up_box">
      <div class="content_box">
        <div class="content_left">
          <img :src="form.img" alt="" />
        </div>
        <div class="content_right">
          <div class="room_title">{{ form.title }}</div>
          <div class="room_price">￥{{ form.price }}元/晚</div>
          <div class="room_des">{{ form.des }}</div>
        </div>
      </div>
    </div>
    <div class="down_box">
      <div class="predetermine_box">
        <div class="formBox">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="联系人">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="房型选择">
        <el-select v-model="form.type" placeholder="请选择活动区域">
          <el-option label="总统套房" value="shanghai"></el-option>
          <el-option label="经济房" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
            <!-- <el-form-item label="入住日期">
              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="退房日期">
              <el-date-picker v-model="form.date2" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <el-form-item label="时间">
              <el-date-picker
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="入住日期"
                end-placeholder="退房日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="需求备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit">预定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reserveHomestay } from "../../http/axios";
export default {
  data() {
    return {
      form: {
        name: "",
        phone: "",
        date: [],

        title: "",
        price: "",
        des: "",
        img: "",
        id: 0,
      },
    };
  },
  mounted() {
    let par = this.$route.params;
    this.form.title = par.title;
    this.form.id = par.id;
    this.form.img = par.img;
    this.form.des = par.des;
    this.form.price = par.price;
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      let username = localStorage.getItem("username");
      // console.log(username);
      // this.form.username = username;
      // let obj = { ...this.form, username };

      reserveHomestay({ ...this.form, username }).then((res) => {
        console.log(res);
        // alert("预订成功！");
        this.$router.go(-1);
      });
    },
  },
};
</script>

<style scoped>
.up_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.content_box {
  width: 1200px;
  background: #a8a6a6;
  display: flex;
}
.content_left {
  width: 700px;
  height: 500px;
}
img {
  width: 100%;
  height: 100%;
}
.content_right {
  width: 500px;
  text-align: center;
  padding: 30px;
}
.room_title {
  font-size: 30px;
  height: 70px;
  line-height: 70px;
}
.room_price {
  font-size: 25px;
  height: 70px;
  line-height: 70px;
}
.room_des {
  font-size: 20px;
  line-height: 30px;
}
.down_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.predetermine_box {
  width: 600px;
}
.formBox {
  width: 1200px;
  height: 100%;
  /* background: #efdada; */
  margin: 30px 0;
}
.el-input {
  width: 350px;
}
</style>
